<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="日期:" label-placement="left">
          <n-date-picker
            v-model:value="range"
            type="datetimerange"
            clearable
            :default-time="['00:00:00', '00:00:00']"
          />
        </n-form-item>
        <n-form-item label="订单号:" label-placement="left">
          <n-input v-model:value="lotname" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="料号:" label-placement="left">
          <n-input v-model:value="productspecname" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="订单类型:" label-placement="left" style="width: 200px">
          <n-select v-model:value="selectedLotTypes" clearable multiple :options="lotTypes" />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getProLotList">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <vxe-grid v-bind="lotListOptions"></vxe-grid>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchProLotList } from '@/service';

const lotname = ref('');
const productspecname = ref('');

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const selectedLotTypes = ref(['工单']);
const lotTypes = ref<Array<SelectOption>>([
  {
    label: '工单',
    value: '工单'
  },
  {
    label: '内部订单',
    value: '内部订单'
  },
  {
    label: '生产订单',
    value: '生产订单'
  }
]);

const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    count += Number(item[field]);
  });
  return count;
};

const lotListOptions = reactive<VxeGridProps>({
  border: true,
  size: 'mini',
  height: 550,
  showFooter: true,
  align: 'center',
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'LOTNAME',
      title: '订单号',
      width: '180px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'LOTTYPE',
      title: '订单类型',
      width: 120,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRODUCTSPECNAME',
      title: '料号',
      width: 200,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PLANQTY',
      title: '订单数',
      width: 100
    },
    { field: 'ACTQTY', title: '排产数', width: 100 },
    {
      title: '工序完成数',
      children: [
        {
          field: 'R01',
          title: '上片',
          width: 80
        },
        {
          field: 'R02',
          title: '清洗',
          width: 80
        },
        {
          field: 'R03',
          title: '镀膜',
          width: 80
        },
        {
          field: 'R04',
          title: '点胶',
          width: 80
        },
        {
          field: 'R05',
          title: '烤胶',
          width: 80
        },
        {
          field: 'R09',
          title: '点胶全检',
          width: 80
        },
        {
          field: 'R06',
          title: '退火',
          width: 80
        },
        {
          field: 'R07',
          title: '微调',
          width: 80
        },
        {
          field: 'R08',
          title: '封焊',
          width: 80
        },

        {
          field: 'R10',
          title: '细漏',
          width: 80
        },
        {
          field: 'R11',
          title: '老化1',
          width: 80
        },
        {
          field: 'R12',
          title: '老化2',
          width: 80
        },
        {
          field: 'R13',
          title: '回流焊',
          width: 80
        },
        {
          field: 'R14',
          title: '测试1',
          width: 80
        },
        {
          field: 'R16',
          title: '气密性检测',
          width: 80
        },
        {
          field: 'R19',
          title: '回流焊2',
          width: 80
        },
        {
          field: 'R25',
          title: '折取',
          width: 80
        },
        {
          field: 'R35',
          title: '写入',
          width: 80
        },
        {
          field: 'R38',
          title: '烘烤',
          width: 80
        },
        {
          field: 'R39',
          title: '温循',
          width: 80
        },
        {
          field: 'R51',
          title: '固晶',
          width: 80
        },
        {
          field: 'R52',
          title: '打线',
          width: 80
        },
        {
          field: 'R53',
          title: '打标签',
          width: 80
        },
        {
          field: 'R54',
          title: '出库',
          width: 80
        },
        {
          field: 'STOCKIN',
          title: '入库',
          width: 80
        }
      ]
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (column.field !== 'LOTNAME' && column.field !== 'LOTTYPE' && column.field !== 'PRODUCTSPECNAME') {
          return sumNum(data, column.property);
        }
        return '';
      })
    ];
  },
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getProLotList = async () => {
  const result = await fetchProLotList(
    dayjs(range.value[0]).format('YYYYMMDDHHmmss'),
    dayjs(range.value[1]).format('YYYYMMDDHHmmss')
  );
  if (result.data) {
    if (lotname.value !== '') {
      lotListOptions.data = result.data.filter(item => (item.LOTNAME as string).includes(lotname.value));
    } else if (productspecname.value !== '') {
      lotListOptions.data = result.data.filter(item =>
        (item.PRODUCTSPECNAME as string).includes(productspecname.value)
      );
    } else {
      lotListOptions.data = result.data;
    }
    lotListOptions.data.forEach(element => {
      if (element.LOTTYPE === 'LOT') {
        // eslint-disable-next-line no-param-reassign
        element.LOTTYPE = '工单';
      }
      if (element.LOTTYPE === 'PARENTLOT') {
        // eslint-disable-next-line no-param-reassign
        element.LOTTYPE = '内部订单';
      }
      if (element.LOTTYPE === 'PRODUCTREQUEST') {
        // eslint-disable-next-line no-param-reassign
        element.LOTTYPE = '生产订单';
      }
    });
    lotListOptions.data = lotListOptions.data.filter(item => {
      return selectedLotTypes.value.indexOf(item.LOTTYPE as string) > -1;
    });
  }
};
</script>
<style scoped></style>
